<template>
  <img v-if="state.fileSrc" class="fileIcon" :src="state.fileSrc" alt="" />
</template>

<script setup>
import IMG from "@/assets/fileIcon/img.png";
import PDF from "@/assets/fileIcon/pdf.png";
import AUDIO from "@/assets/fileIcon/audio.png";
import VIDEO from "@/assets/fileIcon/video.png";
import WORD from "@/assets/fileIcon/word.png";
import EXCEL from "@/assets/fileIcon/excel.png";
import { reactive, watch } from "vue";

const props = defineProps({
  fileType: {
    type: String,
    default: "",
  },
});

const state = reactive({
  fileSrc: "",
});

watch(
  () => props.fileType,
  () => {
    getFileIcon();
  },{
    immediate:true
  }
);

function getFileIcon (){
  let file;
  switch (props.fileType) {
    case "IMG":
      file = IMG;
      break;
    case "PDF":
      file = PDF;
      break;
    case "AUDIO":
      file = AUDIO;
      break;
    case "VIDEO":
      file = VIDEO;
      break;
    case "WORD":
      file = WORD;
      break;
    case "EXCEL":
      file = EXCEL;
      break;
    default:
      break;
  }

  state.fileSrc = file;
};
</script>

<style lang="scss" scoped>
.fileIcon {
  width: 45px;
  height: 45px;
}
</style>
